<template>
	<view class="address-module">
		<view class="main">
			<view class="user-detail">
				<view class="user-name">
					{{address?address.name:''}}
				</view>
				<view class="user-phone">
					{{address?address.phone:''}}
				</view>
			</view>
			<view class="address-detail">
				{{fullAddress}}
			</view>
		</view>
		<view class="change-btn" @click="jump">
			{{address?'更换':'添加地址'}}
		</view>
		<view class="unaddress-title" v-if="!address">
			<i class="iconfont icon-add" />添加收件地址
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { defineProps,computed } from 'vue';
	import { IAddress } from '@/types/address';

	interface IProps {
		address : IAddress | null,
	}

	const props = withDefaults(defineProps<IProps>(), {
		address: null,
	})
	
	const fullAddress = computed(()=>{
		if(!props.address){
			return ''
		}
		return `${props.address.pro} ${props.address.city} ${props.address.area} ${props.address.address}`;
	})

	const jump = () => {
		uni.router.route({
			url: '/pages_address/delivery_address/deliveryAddress',
			params:{
				isSelect:true,
			}
		})
	}
</script>

<style scoped lang="scss">
	@import "./addressModule.scss";
</style>